<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出员工工资表</title>
<style>
body{
font-family:微软雅黑;
font-size:14px}
.title{
background: #f6f6f6;
font-size:18px;
}
.title,.content{
width:500px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title:not(:first-child),.content{
border-top:none;}
.title div{
width:100px;
text-align:center;
float:left}
.content{
clear:both}
.content div{
width:100px;
text-align:center;
float:left}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="title">
		<div>姓名</div>
		<div>月度收入</div>
		<div>专项扣除</div>
		<div>个税</div>
		<div>工资</div>
	</div>
	<div class="content" v-for="(value,index) in staff">
		<div>{{value.name}}</div>
		<div>{{value.income}}</div>
		<div>{{insurance}}</div>
		<div>{{wages[index]}}</div>
		<div>{{value.income-insurance-wages[index]}}</div>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		insurance : 1000,//专项扣除费用
		threshold : 5000,//个税起征点
		tax : 0.03,//税率
		staff : [{//员工数组
			name : '张无忌',
			income : 6600,
		},{
			name : '令狐冲',
			income : 8000,
		},{
			name : '韦小宝',
			income : 7000,
		}]
	},
	computed : {
		wages : function(){
			var t = this;
			var taxArr = [];
			this.staff.forEach(function(s){
				taxArr.push((s.income-t.threshold-t.insurance)*t.tax);
			});
			return taxArr;//个税数组
		}
	}
})
</script>
</body>
</html>